<template>
  <el-form :inline="true" class="demo-form-inline" style="margin-top: 5px;">
    <el-form-item label="所在城市">
      <city-input v-model:city-object="selectCity"></city-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="queryResource">查询</el-button>
    </el-form-item>
  </el-form>

  <el-table :border="true" :data="tableData">
    <el-table-column prop="resourceNo" label="编号"/>
    <el-table-column prop="resourceName" label="名称"/>
    <el-table-column label="所在城市" v-slot="{row:{city}}">
      {{ cityToStr(city) }}
    </el-table-column>
    <el-table-column prop="phone" label="负责人电话"/>
    <el-table-column label="查看详情" v-slot="{row:{resourceId}}">
      <el-button type="primary" @click="router.push(`/user/detail/${productTypeStr}/${resourceId}`)">
        查看详情
      </el-button>
    </el-table-column>
  </el-table>
  <img v-if="loading" src="/src/assets/loading.gif" alt="网络错误"/>
  <div v-if="ended" class="el-empty__description">
    <p>已经到底了</p>
  </div>

</template>

<script setup>
import axios from "~/config/axios";
import CityInput from "~/components/CityInput.vue";
import {ref} from "vue";
import {useRoute} from "vue-router";
import router from "~/config/router.js";
import {productTypeCode} from "~/config/const.js"
import {cityToStr} from "~/config/utils.js"

const tableData = ref([]) // 数据列表
const currentPage = ref(1) // 当前页
const pageSize = 10 // 分页大小
const selectCity = ref()
const loading = ref(false)
const ended = ref(true)
const productTypeStr = (useRoute().params.productTypeStr)
const productType = productTypeCode[productTypeStr]

const fetchData = async () => {
  const urlParam = {
    cityId: selectCity.value?.cityId,
    productType
  }
  const queryObject = Object.assign({}, urlParam, {
    pageNumber: currentPage.value,
    pageSize,
  });
  const records = await axios.get("/resources/userQuery", {params: queryObject})
  loading.value = false;
  tableData.value = tableData.value.concat(records);
  if (records.length === 0) {
    ended.value = true;
  }
};
const queryResource = () => {
  tableData.value = [];
  currentPage.value = 1;
  ended.value = false;
  loading.value = true;
  fetchData();
};
const bottomAction = () => {
  if (!loading.value && !ended.value) {
    console.log("触底，页面为：", currentPage);
    loading.value = true;
    currentPage.value += 1;
    fetchData();
  }
}
defineExpose({bottomAction})

</script>
<style scoped>
</style>